<template>
    <!-- 添加 | 修改 | 查看弹窗 -->
    <el-dialog :title="`${drawerProps.title}图片`" v-model="drawerVisible" append-to-body center destroy-on-close draggable
        :close-on-click-modal="false" width="1400px">
        
        <div class="image-gallery">
            <div class="image-row" v-for="(row, rowIndex) in chunkedImages" :key="rowIndex">
                <div class="image-container" v-for="(img, index) in row" :key="index">
                    <div class="step-label">步骤{{ (rowIndex * 4) + index + 1 }}</div>
                    <img :src="img" alt="步骤图片" class="step-image">
                </div>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="drawerVisible = false" class="simple-btn">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, toRefs, nextTick } from "vue";
import { ElMessage, FormInstance } from "element-plus";
const proxy = getCurrentInstance()?.proxy;

//父组件传递参数类型
interface DiolgProps {
    title: string;
    isView: boolean;
    rowData: any;
    api?: (params: any) => Promise<any>;
    getTableList?: () => void;
    [proName: string]: any;
}
// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const selectRef = ref(null);
const mapRef = ref(null);
const drawerVisible = ref(false);
const drawerProps = ref<DiolgProps>({
    isView: false,
    title: "",
    rowData: {},
});
const appointDeptList = ref([
    {
        id: 1,
        label: "公司1",
        parentId: 0,
        children: [
            {
                id: 4,
                label: "生产部",
                parentId: 1,
                children: [
                    {
                        id: 10,
                        label: "生产部1",
                        parentId: 4,
                    },
                    {
                        id: 11,
                        label: "生产部2",
                        parentId: 4,
                    },
                    {
                        id: 12,
                        label: "生产部3",
                        parentId: 4,
                    },
                ]
            },
            {
                id: 5,
                label: "销售部",
                parentId: 1,
            }
        ]
    },
    {
        id: 2,
        label: "公司2",
        parentId: 0,
        children: [
            {
                id: 6,
                label: "生产部",
                parentId: 2,
            },
            {
                id: 7,
                label: "销售部",
                parentId: 2,
            }
        ]
    },
    {
        id: 3,
        label: "公司3",
        parentId: 0,
        children: [
            {
                id: 8,
                label: "生产部",
                parentId: 3,
            },
            {
                id: 9,
                label: "销售部",
                parentId: 3,
            }
        ]
    }
]);

// 接收父组件传过来的参数
const acceptParams = (params: DiolgProps) => {
    drawerProps.value = params;
    drawerProps.value.rowData.styleColor = '#f5f5f5'
    drawerProps.value.rowData.name = [];
    drawerVisible.value = true;
};

const handleSubmit = () => {
    ruleFormRef.value!.validate(async (valid) => {
        if (!valid) return;
        try {
            await drawerProps.value.api!(drawerProps.value.rowData);
            ElMessage.success({ message: `${drawerProps.value.title}成功！` });
            drawerProps.value.getTableList!();
            drawerVisible.value = false;
        } catch (error) {
            console.log(error);
        }
    });
};

const rules = reactive({
    userId: [{ required: true, message: "user表主键不能为空", trigger: "blur" }],
    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
    delFlag: [{ required: true, message: "删除标志不能为空", trigger: "blur" }],
    fullName: [{ required: true, message: "用户姓名不能为空", trigger: "blur" }],
    code: [{ required: true, message: "接口编号不能为空", trigger: "blur" }]
});

defineExpose({
    acceptParams,
});

// 添加图片数据
const images = ref([
    'https://picsum.photos/300/192?random=1',
    'https://picsum.photos/300/192?random=2',
    'https://picsum.photos/300/192?random=3',
    'https://picsum.photos/300/192?random=4',
    'https://picsum.photos/300/192?random=5',
    'https://picsum.photos/300/192?random=6',
    'https://picsum.photos/300/192?random=7'
]);

// 将图片数组分成每行4个的二维数组
const chunkedImages = computed(() => {
    const chunkSize = 4;
    return Array.from({ length: Math.ceil(images.value.length / chunkSize) }, (v, i) =>
        images.value.slice(i * chunkSize, i * chunkSize + chunkSize)
    );
});
</script>

<style scoped>
.image-gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.image-row {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.image-container {
    position: relative;
    margin-bottom: 20px;
}

.step-image {
    width: 300px;
    height: 192px;
    border-radius: 0;
    object-fit: cover;
}

.step-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 75px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 9px 0px 9px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #FFFFFF;
    z-index: 1;
}
</style>
